<script setup lang="ts">
import {ref} from 'vue'
import CustomNavbar from './components/CustomNavbar'
import CategoryPanel from './components/CategoryPanel'
import HotPanel from './components/HotPanel'
import {getHomeBanner,getGomeCategoryMutli,getHomeHotMutli,getGoodsGuessLike} from '@/services/home.ts' //api接口
import {onLoad}from '@dcloudio/uni-app'
import PageSkeiton from './components/PageSkeiton.vue'
import {useGuessList} from '@/composables/index'

// 保存首页轮播图
const BannerList=ref([])
const getHomeBannerData=async()=>{
  const res = await getHomeBanner()
  BannerList.value = res.result
}

// 前台数据分类
const CategoryMutliList=ref([])
const getGomeCategoryMutliList = async ()=>{
  const res = await getGomeCategoryMutli()
  CategoryMutliList.value=res.result
}

// 热门推荐
const HotMutliList=ref([])
const getHotMutliList = async ()=>{
  const res = await getHomeHotMutli()
  HotMutliList.value=res.result
  
}

// 滚动触底方法
const {guessRef,onScrolltolower} = useGuessList()


// 骨架屏是否加载
const isLoding=ref(false)

onLoad(async()=>{
  isLoding.value=true
  await Promise.all([getHomeBannerData(),getGomeCategoryMutliList(), getHotMutliList()])
  isLoding.value=false
})

const refresher=ref(false)
// 用户下拉刷新
const getRefresherrefresh= async ()=>{
   refresher.value = true
  //  await getHomeBannerData()
  //  await getGomeCategoryMutliList()
  //  await getHotMutliList()
  //父调子 获取子的方法 重置猜你喜欢部分数据
  guessRef.value.resetData()
  // GuessRef.value.getGoodsGuessLike()重新调用猜你喜欢数据
  await Promise.all([getHomeBannerData(),getGomeCategoryMutliList(),getHotMutliList(),GuessRef.value.getGoodsGuessLike()])
  refresher.value = false
}
</script>

<template>
  <!-- 导入自定义导航栏 -->
  <CustomNavbar />
  <!-- 滚动组件 scrolltolower滚动触底触发的函数-->
  <scroll-view refresher-enabled @refresherrefresh="getRefresherrefresh" :refresher-triggered="refresher" @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
      <PageSkeiton v-if="isLoding"/>
      <template v-else>
        <!-- 自定义轮播图 -->
        <XtxSwiper :list="BannerList"/>
        <!-- 分类面板 -->
        <CategoryPanel :list="CategoryMutliList"/>
        <!-- 热门推荐 -->
        <HotPanel :list="HotMutliList"/>
        <!-- 猜你喜欢 -->
        <XtxGuess ref="guessRef"/>
      </template>
      
  </scroll-view>
</template>

<style lang="scss">
page{
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view{
  flex: 1;
}
</style>
